<script setup lang="ts">
import dayjs from 'dayjs'
import type { FormInst, FormRules } from 'naive-ui'
import { goodsSkuGetSkuList, goodsSkuModifySku, goodsSkuTypeDeleteSkuType } from '@/api/goodsSku'
import type { GoodsSkuGetSkuListItemModel } from '@/api/goodsSku'

/** 初始化数据 */
const tableData = ref<GoodsSkuGetSkuListItemModel[]>([])
interface ListQuery {
  page: number
  size: number
  total: number
}
const listQuery = ref<ListQuery>({
  page: 1,
  size: 10,
  total: 0,
})
async function getList() {
  const { code, data } = await goodsSkuGetSkuList(listQuery.value)
  if (code === 0) {
    tableData.value = data.list.map((item) => {
      item.edit = false
      return item
    })
    listQuery.value.total = data.total
  }
}
/** sku修改或增加 */
async function submitSku(item: GoodsSkuGetSkuListItemModel) {
  const { code, msg } = await goodsSkuModifySku({
    id: item.id ? item.id : undefined,
    k: item.k,
    largeImageMode: item.largeImageMode,
  })
  if (code === 0) {
    window.$message?.success(msg)
    getList()
    closePopover()
  }
}
/** 添加sku分类 */
interface Popover {
  visible: boolean
  k: string
  largeImageMode: boolean
}

const rules: FormRules = {
  k: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
}

const popover = ref<Popover>({
  visible: false,
  k: '',
  largeImageMode: false,
})
const skuPopoverRef = ref<FormInst | null>(null)
function submitPopover() { // 提交弹出框
  skuPopoverRef.value?.validate((errors) => {
    if (!errors)
      submitSku({ k: popover.value.k, largeImageMode: popover.value.largeImageMode })
    else
      window.$message?.error('请输入必填项')
  })
}

function closePopover() { // 关闭弹出框
  popover.value = {
    visible: false,
    k: '',
    largeImageMode: false,
  }
}
async function removeSku(data: { id: number; key: string }) { // 删除sku分类
  const { code, msg } = await goodsSkuTypeDeleteSkuType(data)
  if (code === 0) {
    window.$message?.success(msg)
    getList()
  }
}
onMounted(() => {
  getList()
})
</script>

<template>
  <AppPage>
    <n-popover trigger="manual" :show="popover.visible">
      <template #trigger>
        <n-button strong secondary mb10 type="primary" style="width: fit-content;" @click="popover.visible = true">
          <n-icon cursor-pointer size="16">
            <icon-mdi:plus />
          </n-icon>
          添加Sku分类
        </n-button>
      </template>
      <template #default>
        <n-form
          ref="skuPopoverRef"
          size="medium"
          label-placement="left"
          label-width="auto"
          :model="popover"
          :rules="rules"
          :show-require-mark="true"
          mt-10
        >
          <n-form-item label="分类名称" path="k">
            <n-input v-model:value="popover.k" placeholder="输入分类名称" />
          </n-form-item>
          <n-form-item label="大图模式">
            <n-switch v-model:value="popover.largeImageMode" :round="false" />
          </n-form-item>
        </n-form>
        <n-space justify="center" align="center">
          <n-button mr-5 b-rd-5 size="small" @click="closePopover">
            <n-icon cursor-pointer size="16">
              <icon-mdi:cancel />
            </n-icon>
            <span ml-2>取 消</span>
          </n-button>
          <n-button ml-5 b-rd-5 type="primary" size="small" @click="submitPopover">
            <n-icon cursor-pointer size="16">
              <icon-mdi:checkbox-marked-circle-outline />
            </n-icon>
            <span ml-2>确 定</span>
          </n-button>
        </n-space>
      </template>
    </n-popover>
    <n-grid x-gap="15" :cols="5" bg-white p-10 text-14 b-rd-5 dark:bg-dark>
      <n-gi f-c-c font-bold>
        创建时间
      </n-gi>
      <n-gi f-c-c font-bold>
        分类名称
      </n-gi>
      <n-gi f-c-c font-bold>
        大图模式
      </n-gi>
      <n-gi :span="2" f-c-c font-bold>
        操作
      </n-gi>
    </n-grid>
    <template v-if="tableData.length > 0">
      <n-grid v-for="item in tableData" :key="item.id" x-gap="15" :cols="5" bg-white p-10 text-14 b-rd-5 dark:bg-dark mt-15>
        <n-gi f-c-c font-bold>
          {{ dayjs(item.createTime || new Date()).format('YYYY-MM-DD HH:mm') }}
        </n-gi>
        <n-gi f-c-c font-bold>
          <span v-if="!item.edit">{{ item.k }}</span>
          <n-input v-else v-model:value="item.k" type="text" placeholder="输入分类名称" />
        </n-gi>
        <n-gi f-c-c font-bold>
          <n-switch v-model:value="item.largeImageMode" :round="false" rubber-band :disabled="!item.edit" />
        </n-gi>
        <n-gi :span="2" f-c-c font-bold>
          <template v-if="!item.edit">
            <n-button type="info" size="small" text-14 ml-5 @click="item.edit = true">
              <template #icon>
                <icon-mdi:square-edit-outline />
              </template>
              编 辑
            </n-button>
          </template>
          <template v-else>
            <n-button mr-5 size="small" text-14 @click="item.edit = false">
              <n-icon cursor-pointer>
                <icon-mdi:cancel />
              </n-icon>
              <span ml-2>取 消</span>
            </n-button>
            <n-button ml-5 size="small" text-14 type="primary" @click="submitSku(item)">
              <n-icon cursor-pointer>
                <icon-mdi:checkbox-marked-circle-outline />
              </n-icon>
              <span ml-2>确 定</span>
            </n-button>
          </template>
          <n-popconfirm
            @positive-click="removeSku({ id: item.id as number, key: item.k_s as string })"
          >
            <template #trigger>
              <n-button type="error" size="small" text-14 ml-5 mt5>
                <template #icon>
                  <icon-material-symbols:delete-outline />
                </template>
                删除
              </n-button>
            </template>
            确定执行该操作吗？
          </n-popconfirm>
        </n-gi>
      </n-grid>
    </template>
    <template v-else>
      <div bg-white p-10 text-14 font-bold b-rd-5 mt-10 dark:bg-dark f-c-c pt-20 pb-20>
        暂无数据
      </div>
    </template>
  </AppPage>
</template>

<style lang="scss" scoped>
:deep(.n-input__input-el) {
  text-align: center;
}
</style>
